<template>
  <div>
    <div class="yxp-scene-en" v-if="isBack">
      <div class="close" id="yxp-commp-back11" @click="handleClose"></div>
        <p class="tips">{{title}}</p>
        <div class="btn">
        <div class="btn-item" id="yxp-commp-back13" @click="handleBack">确定</div>
        <div class="btn-item" id="yxp-commp-back14" @click="handleClose">取消</div>
        </div>
    </div>
    <div class="mark" v-if="isBack"></div>
  </div>
</template>
<script>
export default {
  name: 'ScenePop',
  props: {
    title: {
      type: String,
      default: ''
    },
    isBack: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    },
    // id: {
    //   type: Number,
    //   default: 0
    // },
    courseType: {
      type: Number,
      default: 0
    },
    courseId: {
      type: Number,
      default: 0
    },
    modal: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {}
  },
  mounted () {
    console.log(this.courseId + '---' + this.courseType)
  },
  methods: {
    handleClose () {
      this.$emit('close', false)
    },
    handleBack () {
      if (this.$parent.playing && this.$parent.audio !== null) {
        this.$parent.audio.pause()
      }
      if (this.$parent.defaultPlaying && this.$parent.audio1 !== null) {
        this.$parent.audio1.pause()
      }
      if (this.type === '0') {
        this.$router.replace({
          path: '/composition'
        })
      } else {
        if (this.modal === 1) {
          this.$router.replace({
            path: '/composition/list',
            query: {
              id: this.courseId,
              course_type: this.courseType
            }
          })
        } else {
          this.$router.replace({
            path: '/composition/courseList',
            query: {
              id: this.courseId,
              course_type: this.courseType
            }
          })
        }
        
      }
    }
  }
}
</script>
<style lang='less' scoped>
.yxp-scene-en {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 360px;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    z-index: 1200;
    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 20px;
      height: 20px;
      background: url(../../../assets/word/close-icon.png) no-repeat;
      background-size: 20px 20px;
      cursor: pointer;
      &:hover {
        background-image: url(../../../assets/word/close-hover.png);
      }
    }
    .tips {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333;
      line-height:80px;
      padding: 30px 0;
    }
    .btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 40px;
      padding-right: 40px;
      padding-bottom: 30px;
      &-item {
        width: 130px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        background: #27BFA3;
        border-radius: 100px;
        cursor: pointer;
        cursor: pointer;
        &:first-child {
          margin-right: 20px;
        }
        &:hover {
          background: #18A38A;
        }
      }
    }
  }
</style>
